<template>
    <a-modal class="info_modal" v-model="visible" title="政策内容" :confirmLoading="submitLoading" width="800px" ok-text="确认"
        cancel-text="取消" @ok="addFormSubmit">
        <a-form layout="vertical">
            <a-form-item label="政策类型" class="formRequired">
                <a-select placeholder="请选择政策类型" style="width: 300px;" v-model="params.type">
                    <a-select-option v-for="item in policyTypeList" :key="item.key">{{ item.value }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="主标题" class="formRequired">
                <a-input placeholder="请输入主标题" v-model="params.title" />
            </a-form-item>
            <a-form-item label="可查看组织" class="formRequired">
                <a-tree-select v-model="params.orgIdList" style="min-width: 300px;" :tree-data="orgData"
                    :replaceFields="orgFields" placeholder="选择组织" tree-checkable multiple allowClear />
            </a-form-item>
            <a-form-item label="富文本内容" class="formRequired">
                <publicEditor ref="publicEditor" @submitOk="submitOk"></publicEditor>
            </a-form-item>
            <a-form-item label="附件">
                <a-button type="primary" @click="importAnnex" style="margin: 0 0 10px;width: 160px;">上传文件</a-button>
                <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    ref="fileExcel" @change="importAnnexHandle" style="display: none;" />
                <a-alert message="支持格式：.rar .zip .doc .docx .pdf ，单个文件不能超过200MB" type="info" />
                <div class="annexList">
                    <div class="list" v-for="(item,index) in params.policyFileList" :key="item.fileId">
                        <span><a-icon type="file" style="margin-right: 6px;" />{{ item.fileName }}</span>
                        <a-icon type="delete" style="cursor: pointer;" @click="deteleAnnex(index)" />
                    </div>
                </div>
            </a-form-item>

        </a-form>

    </a-modal>
</template>

<script>
import {
    policyQuery,
    policyAdd,
    policyUpdate,
    policyDelete
} from "@/api/human/park"
import {
    getAllDepartmentTree,
} from '@/api/human/department'
import { mapGetters, mapActions } from 'vuex'
import { uploadNewFile } from "@/api/manage/base"
import publicEditor from '@/components/Editor/publicEditor'
export default {
    name: 'AddInfo',
    components: {
        publicEditor
    },
    data() {
        return {
            visible: false,
            params: {
                policyId: undefined,
                type: undefined,
                title: '',
                content: '',
                orgIdList: [],
                policyFileList: [],
            },

            submitLoading: false,
            policyTypeList: [], // 政策类型列表
        }
    },
    computed: {
        ...mapGetters(['orgData', 'orgFields']),
    },
    methods: {
        ...mapActions({
            getAllDepartmentTree: 'department/getAllDepartmentTree'
        }),
        async add(policyTypeList, id) {
            this.policyTypeList = policyTypeList;
            this.params.policyId = id;
            this.visible = true;
            this.getAllDepartmentTree(-1);
            // 打开弹窗清空
            this.params.type = undefined;
            this.params.content = '';
            this.params.title = '';
            this.params.orgIdList = [];
            this.params.policyFileList = [];

            if (id) {
                // 编辑
                const { code, data } = await policyQuery(this.params.policyId);
                if (code === '1') {
                    this.params.title = data.title
                    this.params.type = data.type
                    this.params.orgIdList = data.orgIdList
                    this.params.content = data.content
                    this.params.policyFileList = data.fileList
                    this.$refs.publicEditor.initInfo(data.content);
                }
            } else {
                // 新增
                this.$refs.publicEditor.initInfo('');
            }
        },
        // 导入表单
        importAnnex() {
            this.$refs.fileExcel.click();
        },
        async importAnnexHandle(e) {
            e.preventDefault();
            let _this = this;
            let file = e.target.files[0];
            if (file === undefined) {
                return;
            }
            if (!(file.size / 1024 / 1024 < 200)) {
                _this.$message.error('模版大小不能超过 200MB!');
                e.target.value = "";
                return;
            }
            e.target.value = "";
            if (file) {
                let formData = new FormData();
                formData.append("file", file);
                formData.append("dirName", '政策库');
                let {
                    code,
                    data
                } = await uploadNewFile(formData);
                if (code === '1') {
                    _this.params.policyFileList.push({
                        fileUrl: data,
                        fileName: file.name
                    })
                }
            }
        },
        // 删除附件
        async deteleAnnex(index) {
            this.params.policyFileList.splice(index,1);
            this.$message.success('删除成功');
        },
        submitOk(html) {
            this.params.content = html;
        },
        async addFormSubmit() {
            console.log(this.params);
            if (!this.params.type) {
                return this.$message.error("请选择政策类型");
            }
            if (!this.params.title) {
                return this.$message.error("请输入主标题");
            }
            if (this.params.orgIdList.length == 0) {
                return this.$message.error("请选择可查看组织");
            }
            if (!this.params.content) {
                return this.$message.error("请输入富文本内容");
            }
            this.submitLoading = true;
            const { code } = this.params.policyId ? await policyUpdate(this.params) : await policyAdd(this.params);
            this.submitLoading = false;
            if (code === '1') {
                this.visible = false;
                this.$message.success('操作成功')
                this.$emit('on-ok')
            }
        }
    }
}
</script>
<style lang="less">
.info_modal {
    .formRequired {
        .ant-form-item-label::before {
            display: inline-block;
            margin-right: 4px;
            color: #f5222d;
            font-size: 14px;
            font-family: SimSun, sans-serif;
            line-height: 1;
            content: '*';
        }
    }

    .annexList {
        padding-top: 10px;
        .list {
            width: 100%;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 15px;
        }
    }
}
</style>
